<template>
  <div>
    <div id="TerrainContainer">
    </div>
    <div id="tool">
      <div>
        <span class="demonstration">Exaggeration</span>
        <el-slider v-model="terrainExaggeration" @change="handleTerrainExaggeration" :min="0"
                   :max="10"></el-slider>
      </div>
      <div>
        <span class="demonstration">Relative Height</span>
        <el-slider v-model="terrainExaggerationRelativeHeight" @change="handleTerrainExaggerationRelativeHeight"
                   :min="-1000" :max="10000"></el-slider>
      </div>
      <div>
        <el-checkbox v-model="checked">备选项</el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewer: null,
      checked: true,
      terrainExaggerationRelativeHeight: 2400,
      terrainExaggeration: 1.0
    }
  },
  mounted() {
    this.initCesium()
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('TerrainContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息

      this.viewer.scene.globe.depthTestAgainstTerrain = true;
      this.viewer.scene.globe.terrainExaggeration = this.terrainExaggeration;
      this.viewer.scene.globe.terrainExaggerationRelativeHeight = this.terrainExaggerationRelativeHeight;

    },
    addTerrainExaggeration() {
      const scene = this.viewer.scene;
      const globe = scene.globe;
      globe.terrainExaggeration = 2.0;
      globe.terrainExaggerationRelativeHeight = 2400.0;

      scene.camera.setView({
        destination: new Cesium.Cartesian3(
          336567.0354790703,
          5664688.047602498,
          2923204.3566963132
        ),
        orientation: new Cesium.HeadingPitchRoll(
          1.2273281382639265,
          -0.32239612370237514,
          0.0027207329018610338
        )
      });

      this.viewer.entities.add({
        position: new Cesium.Cartesian3(
          314557.3531714575,
          5659723.771882165,
          2923538.5417330978
        ),
        ellipsoid: {
          radii: new Cesium.Cartesian3(400.0, 400.0, 400.0),
          material: Cesium.Color.RED,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        }
      });
    },
    updateMaterial() {
      if (this.checked) {
        const height = this.viewer.scene.globe.terrainExaggerationRelativeHeight;
        const exaggeration = this.viewer.scene.globe.terrainExaggeration;
        const alpha = Math.min(1.0, exaggeration * 0.25);
        const layer = {
          extendUpwards: true,
          extendDownwards: true,
          entries: [
            {
              height: height + 100.0,
              color: new Cesium.Color(0.0, 1.0, 0.0, alpha * 0.25)
            },
            {
              height: height + 50.0,
              color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5)
            },
            {
              height: height,
              color: new Cesium.Color(1.0, 1.0, 1.0, alpha)
            },
            {
              height: height - 50.0,
              color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5)
            },
            {
              height: height - 100.0,
              color: new Cesium.Color(1.0, 0.0, 0.0, alpha * 0.25)
            }
          ]
        };
        this.viewer.scene.globe.material = Cesium.createElevationBandMaterial({
          scene: this.viewer.scene,
          layers: [layer]
        });
      } else {
        this.viewer.scene.globe.material = undefined;
      }
    },
    handleTerrainExaggeration(val) {
      this.viewer.scene.globe.terrainExaggeration = val;
      //this.viewer.scene.globe.terrainExaggerationRelativeHeight = this.terrainExaggerationRelativeHeight;
      this.updateMaterial()
    },
    handleTerrainExaggerationRelativeHeight(val) {
      // this.viewer.scene.globe.terrainExaggeration = this.terrainExaggeration;
      this.viewer.scene.globe.terrainExaggerationRelativeHeight = val;
      this.updateMaterial()
    }
  }
}
</script>
<style scoped>
#tool {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 300px;
  padding: 20px;
  background: antiquewhite;
}
</style>
